import React, {Component} from 'react';
import $ from 'jquery'
import { connect } from 'react-redux'
import Total from './Total'
import Crisis from './Crisis'
import Details from './Details'
import Header from './components/Header'
import BaiduMap from './components/BaiduMap'
import EchartsLine from './components/EchartsLine'
import PieEcart from './catetype'
import axios from 'axios'

function setwindow(){
  function resize(){
    let winH = window.innerHeight
    let winW = window.innerWidth
    let ratio = winW / winH
    let scale = winH / 1080
    $('.layout').css('width', ratio * 1080)
    $('.layout').css('transform', `scale(${scale},${scale}`)
  }
  resize()
  $(window).resize(() => {
    resize()
  })
}

@connect(state => state)
class Layout extends Component{
  componentDidMount(){
    setwindow()
  }
  componentDidUpdate(){
    setwindow()
  }
  render(){
    const data=[
      {value:335, name:'直接访问'},
      {value:310, name:'邮件营销'},
      {value:234, name:'联盟广告'},
      {value:135, name:'视频广告'},
      {value:1548, name:'搜索引擎'}
    ]
    const body =(
      <div className="layout">
        <div className="left">
          <Total />
          <Crisis />
        </div>
        <div className="moddle">
          <Header />
          <BaiduMap />
          <EchartsLine />
        </div>
        <div className="right">
          <PieEcart data={data}></PieEcart>
        </div>
      </div>
    )
    return this.props.isDetails ? <Details /> : body
  }
}
export default Layout